{include file="app/common/templates/header.tpl"}
{include file="pagelets/templates/commonmenu.tpl"}

<script type="text/javascript">
var proxy = new JSONRPCProxy('{$JSONRPCURL}');

{literal}
function showDetails(id) {
	proxy.GetPerson({person_id: id}, 
		function(result) {
			var bd = result.birthDate.split('-');
			var dd = result.deathDate.split('-');
			
			$('details').innerHTML = result.firstName + " " + result.lastName + "<br>" + 
				bd[1] + "/" + bd[2] + "/" + bd[0] + " - " + dd[1] + "/" + dd[2] + "/" + dd[0] + "<br>" +
				result.gender + "<br>";  
		});
}

function clearDetails() {
	$('details').innerHTML = null;
}
{/literal}
</script>
<p>
<table border="0" cellpadding="4">
    <tr><td style="font-weight: bold">ID</td><td style="font-weight: bold">Name</td></tr>
{foreach from=$persons item=person}
	<tr>
		<td>{$person.id}</td>
		<td><span class="listDetail" onmouseover="showDetails('{$person.id}')" onmouseout="clearDetails()">{$person.firstName} {$person.lastName}</span></td>
		<td><a href="{$DeleteURL}/DeletePerson/{$person.id}">Delete</a></td>
	</tr>
{/foreach}
</table>

<div><strong>Details:</strong>
<div id="details"></div>
</div>

{include file="app/common/templates/footer.tpl}
